import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { TouchableOpacity, Image, View, Text } from 'react-native'
import styles from './Styles/TodayRecommendStyle'

export default class TodayRecommend extends Component {
  // Prop type warnings
  static propTypes = {
    data: PropTypes.array,
    navigation: PropTypes.object,
    style: PropTypes.object,
  }
  
  // Defaults for props
  static defaultProps = {
    data: null
  }

  render () {
    if (!this.props.data) {
      return null
    }
    const { navigate } = this.props.navigation
    return (
      <View style={styles.container}>
        {this.props.data.map((item,i) =>
          <TouchableOpacity
            activeOpacity={0.7}
            style={styles.item}
            key={i}
            onPress={()=>navigate('CommodityDetailScreen', {id:item.id})}>
            <View style={styles.itemContainer}>
              <Image source={{uri:item.img}} style={styles.cover} />
              <View style={styles.main}>
                <Text style={styles.title}>{item.name}</Text>
                <Text>
                  <Text style={styles.price}>{item.price}</Text>
                  元</Text>
              </View>
            </View>
          </TouchableOpacity>
        )}
      </View>
    )
  }
}
